<template>                        
    <div class="cimrts-info2">
        <div class="cimrts-info-header">
            <div class="info-item" v-for="(item, index) in cimrtsInfo" :key="index" @click="clickInfoItem(item)"
                :class="{ 'info-actived': item.checked }">{{ item.name }}</div>
        </div>
        <div class="cimrts-info-content">
            <div class="info-server" v-if="currentInfo.name == '服务地址'">
                <div class="item1">
                    <div class="key">服务地址:</div>
                    <div class="switch">
                        <el-input type="text" v-model.lazy="url" @blur="cimrtsUrlRef = url"
                            @keydown.enter="cimrtsUrlRef = url" />
                        <div class="list-img choose" @click="showSwitchCimrts = true" title="选择"></div>
                    </div>
                </div>
                <div class="item1">
                    <div class="key">token:</div>
                    <el-input type="text" v-model.lazy="token" @blur="cimrtsTokenRef = token"
                        @keydown.enter="cimrtsTokenRef = token" />
                </div>
            </div>
            <div class="info-data" v-if="currentInfo.name == '数据地址' && Object.keys(tileServiceInfoRef).length > 0">
                <div class="item1">
                    <div class="key">数据地址：</div>
                    <div class="data-url">
                        <div>{{ dataUrlRef }}</div>
                        <el-button class="common-btn" ref="urlRef" @click="copy" title="拷贝"
                            @mouseenter="isCopyHover = true" @mouseleave="isCopyHover = false">
                            <img :src="!isCopyHover ? imgUrl1 : imgUrl2"
                                width="20" height="20" />
                        </el-button>
                    </div>
                </div>
                <div class="item1">
                    <div>显示</div>
                    <div>
                        <el-switch v-model="showRef" size="small" />
                    </div>
                </div>
            </div>
            <div class="info-scope" v-if="currentInfo.name == '数据范围' && Object.keys(tileServiceInfoRef).length > 0">
                <div class="item1" v-if="tileServiceInfoRef.srs">
                    <div>空间参考：</div>
                    <el-tooltip placement="bottom-start">
                        <template #content>
                            <div class="srs-content">
                                {{ tileServiceInfoRef.srs }}
                            </div>
                        </template>
                        <div class="srs">{{ tileServiceInfoRef.srs }}</div>

                    </el-tooltip>
                </div>
                <div class="item1" v-if="tileServiceInfoRef.projH">
                    <div>投影高：</div>
                    <div>{{ tileServiceInfoRef.projH }} 米</div>
                </div>
                <div class="item1">
                    <div>数据边界：</div>
                    <div class="boundary">
                        <div class="boundary-item">
                            <div>
                                西：{{ cutBoundingbox.minX }}&nbsp;{{ unit }}，东：{{
                cutBoundingbox.maxX
            }}&nbsp;{{ unit }}
                            </div>
                            <div>跨度:{{ spanX }} 米</div>
                        </div>
                        <div class="boundary-item">
                            <div>
                                南：{{ cutBoundingbox.minY }}&nbsp;{{ unit }}，北：{{
                cutBoundingbox.maxY
            }}&nbsp;{{ unit }}
                            </div>
                            <div>跨度:{{ spanY }} 米</div>
                        </div>
                        <div class="boundary-item" style="position: relative;">
                            <div>
                                下：{{ cutBoundingbox.minZ }}&nbsp;米，上：{{
                cutBoundingbox.maxZ
            }}&nbsp;米
                            </div>
                            <div>跨度:{{ spanZ }} 米</div>

                            <el-button class="common-btn cut-box" @click="cut = !cut">切换</el-button>

                        </div>


                    </div>
                </div>
                <div class="item1">
                    <div>显示边界：</div>
                    <div>
                        <el-switch v-model="showRectangleRef" size="small" />
                    </div>
                </div>

            </div>
            <div class="info-debug" v-if="currentInfo.name == '调试信息' && Object.keys(tileServiceInfoRef).length > 0">
                <div class="item-content">
                    <div class="item1">
                        <div>显示包围盒：</div>
                        <div>
                            <el-switch v-model="showBoundingBox" size="small" />
                        </div>
                    </div>
                    <div class="item2">
                        <div>SkipLOD：</div>
                        <el-switch v-model="SkipLOD" size="small" @change="changeSkipLOD" />
                    </div>

                </div>

                <div class="item1">
                    <div>几何误差：</div>
                    <div class="range-box">
                        <el-slider class="range-slider" v-model="range" @input="setRange" :min="0" :max="12" :step="1"
                            :show-tooltip="false" />
                        <div class="range-num">{{ maximumScreenSpaceErrorRef }}</div>
                    </div>
                </div>
                <div class="item1">
                    <div>显存：</div>
                    <div class="range-box">
                        <el-slider class="range-slider" v-model="range2" @input="setCacheBytes" :min="1" :max="10"
                            :step="1" :show-tooltip="false" />
                        <div class="range-num">{{ range2Num }}</div>
                    </div>
                </div>
                 <div class="item1">
                    <div>环境光散射强度：</div>
                    <div class="range-box">
                        <el-slider class="range-slider" v-model="atmosphereScatteringIntensityRef"  :min="0" :max="30"
                            :step="1" :show-tooltip="false" />
                        <div class="range-num">{{ atmosphereScatteringIntensityRef }}</div>
                    </div>
                </div>
                 <div class="item1">
                    <div>亮度：</div>
                    <div class="range-box">
                        <el-slider class="range-slider" v-model="brightnessRef"  :min="0" :max="4"
                            :step="0.1" :show-tooltip="false" />
                        <div class="range-num">{{ brightnessRef }}</div>
                    </div>
                </div>
                <div class="item1" v-if="typeNameRef == 'ESCesiumViewer'">
                    <div>统计信息：</div>
                    <div class="statistics">
                        <div class="statistics-left">
                            <div class="statistics-item">
                                <label>遍历个数：</label>
                                <span>{{ visited }}</span>
                            </div>
                            <div class="statistics-item">
                                <label>总显存：</label>
                                <span>{{ totalMemory }}MB</span>
                            </div>
                            <div class="statistics-item">
                                <label>三角面个数：</label>
                                <span>{{ numberOfTrianglesSelected }}</span>
                            </div>
                            <div class="statistics-item">
                                <label>纹理显存：</label>
                                <span>{{ texturesByteLength }}MB</span>
                            </div>
                            <div class="statistics-item">
                                <label>显示个数：</label>
                                <span>{{ selected }}</span>
                            </div>
                        </div>
                        <div class="statistics-right">
                            <div class="statistics-item">
                                <label>几何体显存：</label>
                                <span>{{ geometryByteLength }}MB</span>
                            </div>
                            <div class="statistics-item">
                                <label>渲染批次：</label>
                                <span>{{ numberOfCommands }}</span>
                            </div>
                            <div class="statistics-item">
                                <label>属性数据长度：</label>
                                <span>{{ batchTableByteLength }}KB</span>
                            </div>
                            <div class="statistics-item">
                                <label>全局缓存：</label>
                                <span>{{ overallCache }}MB</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount, computed, watch, shallowRef } from "vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import {
    createVueDisposer,
    toVR,
} from "earthsdk-ui";
import { ElMessage } from "element-plus";
import { roundValues, roundValues2 } from "@/scripts/utils";

const imgUrl1 = new URL("../../assets/cimrts/baseInfo/copy.png", import.meta.url).href
const imgUrl2 = new URL("../../assets/cimrts/baseInfo/copy_hover.png", import.meta.url).href

const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();
const cimrtsManager = objm.cimrtsManager
const eSRtsTileset = cimrtsManager.eSRtsTileset

const eS3DTileset = eSRtsTileset.es3DTileset
const polylinesWrapper = cimrtsManager.polylinesWrapper
const activeViewerRef = toVR<any>(d, [objm, "activeViewer"]);
const typeNameRef = toVR(d, [objm, "typeName"]);

// 基本信息
const cimrtsInfo = ref([
    {
        name: "服务地址",
        checked: true,
    },
    {
        name: "数据地址",
        checked: false,
    },
    {
        name: "数据范围",
        checked: false,
    },
    {
        name: "调试信息",
        checked: false,
    }
])

const isLocationHover = ref(false)
const isCopyHover = ref(false)
const isRefreshHover = ref(false)


// 当前选中的基本信息
const currentInfo = ref({
    name: "服务地址",
    checked: true,
})

// 点击基本信息
const clickInfoItem = (item: any) => {
    cimrtsInfo.value.map((e) => e.checked = false)
    item.checked = true
    currentInfo.value = item
}

// 服务地址
const cimrtsUrlRef = toVR<string>(d, [cimrtsManager, "cimrtsUrl"]);
const url = ref(cimrtsUrlRef.value);
watch(cimrtsUrlRef, (val) => {
    url.value = val;
})
// token
const cimrtsTokenRef = toVR<string>(d, [cimrtsManager, "cimrtsToken"]);
const token = ref(cimrtsTokenRef.value);

watch(cimrtsTokenRef, (val) => {
    token.value = val;
})
// 数据地址
const dataUrlRef = toVR<string>(d, [eSRtsTileset.es3DTileset, "url"]);
// 显示
const showRef = toVR<string>(d, [eSRtsTileset, "show"]);
// 基础信息
const tileServiceInfoRef = toVR<any>(d, [cimrtsManager, "tileServiceInfo",]);

// 显示边界
const showRectangleRef = toVR(d, [polylinesWrapper, "show"]);
// 显示包围盒
const showBoundingBox = toVR(d, [eS3DTileset, "czmDebugShowBoundingVolume"]);

const showSwitchCimrts = toVR(d, [cimrtsManager.switchCimrts, "show"]);
// 环境光散射强度
const atmosphereScatteringIntensityRef = toVR(d, [cimrtsManager, "atmosphereScatteringIntensity"]);
// 亮度
const brightnessRef = toVR(d, [cimrtsManager, "brightness"]);


// 精度
const maximumScreenSpaceErrorRef = toVR(d, [eS3DTileset, "maximumScreenSpaceError"]);
// 缓存大小
const cacheBytesRef = toVR(d, [eS3DTileset, "cacheBytes"]);

//遍历个数
const visited = ref();
//总显存
const totalMemory = ref();
//三角面个数
const numberOfTrianglesSelected = ref();
//纹理显存
const texturesByteLength = ref();
//显示个数
const selected = ref();
//几何体显存
const geometryByteLength = ref();
//渲染批次
const numberOfCommands = ref();
//属性数据长度
const batchTableByteLength = ref();

//全局显存
const overallCache = ref();

// 获取统计信息
const debugData = () => {
    if (getProjectManager().activeViewer?.typeName != "ESCesiumViewer") return;
    if (!activeViewerRef.value) return;
    const czm3DTiles = activeViewerRef.value?.getCzmObject(eS3DTileset)?.czm3DTiles;
    if (!czm3DTiles) return;
    const tileset = czm3DTiles.tileset;
    if (!tileset) return;
    const statistics = tileset.statistics;
    if (!statistics) return;
    const debugInformation = czm3DTiles.tileset.statistics;
    if (!debugInformation) return;
    try {
        visited.value = debugInformation.visited;
        totalMemory.value = ((debugInformation.geometryByteLength +debugInformation.texturesByteLength) /1024 /1024).toFixed(0);
        numberOfTrianglesSelected.value = debugInformation.numberOfTrianglesSelected;
        texturesByteLength.value = (debugInformation.texturesByteLength / 1024 /1024).toFixed(0);
        selected.value = debugInformation.selected;
        geometryByteLength.value = ( debugInformation.geometryByteLength / 1024 / 1024 ).toFixed(0);
        numberOfCommands.value = debugInformation.numberOfCommands;
        batchTableByteLength.value = (debugInformation.batchTableByteLength / 1024).toFixed(0);
        overallCache.value = (getProjectManager().overallCache() /1024 /1024).toFixed(0);
    } catch (error) {
        console.log(error);
    }
};

// 滑块
const range = ref(4);
maximumScreenSpaceErrorRef.value = Math.pow(2, range.value);
// 设置精度
const setRange = (e: any) => {
    range.value = e;
    maximumScreenSpaceErrorRef.value = Math.pow(2, range.value);
};

// 滑块
const range2 = ref(4);
// 显示值
const range2Num = ref(2048);
cacheBytesRef.value = 4 * 536870912;

// 设置显存
const setCacheBytes = (e: any) => {
    range2.value = e;
    range2Num.value = Number(e) * 512;
    cacheBytesRef.value = Number(e) * 536870912;
};
// 切换
const cut = ref(true);
// 米
const boundingbox = computed(() => {
    return tileServiceInfoRef.value
        ? roundValues(tileServiceInfoRef.value.boundingbox)
        : {};
});
// 度
const lonLatboundingbox = computed(() => {
    return tileServiceInfoRef.value
        ? roundValues2(tileServiceInfoRef.value.lonLatboundingbox)
        : {};
});

const unit = computed(() => {
    if (cut.value) {
        return "米";
    } else {
        return "度";
    }
});

const spanX = computed(() => {
    return parseFloat(
        (Number(boundingbox.value.maxX) - Number(boundingbox.value.minX)).toFixed(3)
    );
});

const spanY = computed(() => {
    return parseFloat(
        (Number(boundingbox.value.maxY) - Number(boundingbox.value.minY)).toFixed(3)
    );
});

const spanZ = computed(() => {
    return parseFloat(
        (Number(boundingbox.value.maxZ) - Number(boundingbox.value.minZ)).toFixed(3)
    );
});
const cutBoundingbox = computed(() => {
    if (cut.value) {
        return boundingbox.value;
    } else {
        return lonLatboundingbox.value;
    }
});


// 复制
const copy = async () => {
    if (!dataUrlRef.value) {
        ElMessage.error("数据地址为空");
        return;
    }
    const input = document.createElement('input');
    input.value = dataUrlRef.value;
    document.body.appendChild(input);
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);
    ElMessage.success('复制成功')
};



// SkipLOD
const SkipLOD = ref(false);
eS3DTileset.czmSkipLevelOfDetail = false;

const changeSkipLOD = (e: any) => {
    eS3DTileset.czmSkipLevelOfDetail = e
}


// 显示隐藏
const isShow = () => {
    eS3DTileset.show = !eS3DTileset.show;
}
let timer1: number;

onMounted(() => {
    timer1 = window.setInterval(() => {
        debugData();
    }, 1000);
});
onBeforeUnmount(() => {
    timer1 && clearTimeout(timer1);
});
</script>

<style scoped>
.cimrts-info2 {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.cimrts-info-header {
    height: 40px;
    width: 100%;
    background: #F0F0F0;
    border-radius: 4px;
    display: flex;
}

.cimrts-info-content {
    height: calc(100% - 55px);
    width: 100%;
    /* background-color: #d2d8f4; */
}

.data-url {
    display: flex;
}

.info-item {
    height: 100%;
    text-align: center;
    line-height: 40px;
    width: 25%;
    border-radius: 4px;
    cursor: pointer;
}


.info-actived {
    color: #fff;
    background-color: #537cfe;
}

.none {
    pointer-events: none;

}

.item1 {
    display: grid;
    grid-template-columns: 115px 1fr;
    align-items: center;
}

.item2 {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
}

.url {
    /* margin-right: 10px; */
    word-break: break-all;
}

.data-btn {
    display: flex;
    gap: 15px;
}

.el-button {
    margin-left: 0 !important;
}

.boundary {
    display: flex;
    flex-direction: column;
}

.boundary-item {
    margin-bottom: 5px;
}

.item-content {
    height: 30px;
    display: flex;
    justify-content: space-between;
}

.cut-box {
    position: absolute;
    right: 0px;
    bottom: 0px;
}

.range-slider {
    width: 220px !important;

}

.statistics {
    display: flex;
    justify-content: space-between;
}

.statistics-item {
    margin-bottom: 3px;
}

.info-server,
.info-data,
.info-scope,
.info-debug {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-debug {
    gap: 5px;

}

.el-button,
.el-button.is-round {
    padding: 5px;
}
.list-img {
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.choose {
    background: url("@/assets/cimrts/propPanel/choose.png") no-repeat;
    background-size: 100% 100%;
}
.switch{
    display: grid;
    grid-template-columns: 1fr 25px;
    gap: 5px;
    align-items: center;
}
</style>